<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>05_姓名案例_watch实现</title>
</head>
<body>
    
    <!-- 
            computed(计算属性) 和 watch(监听属性) 之间的区别：
                1.computed 能完成的功能，watch 都可以完成
                2.watch 能完成的功能，computed 不一定能完成，例如：watch可以进行异步操作。
            两个重要的原则：
                1.所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或是组件实例对象
                2.所有不被 Vue 管理的函数 （定时器的回调函数、ajax的回调函数.Promise的回调函数），最好写成箭头函数，
                    这样 this 的指向才会是 mv 或是组件实例对象。

     -->


    <!-- 容器 -->
    <div id="root">
        姓：<input type="text" v-model="nameOne"><br>
        名：<input type="text" v-model="nameLast"><br>
        姓名： <span>{{fullName}}</span> <br/>
  
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。
       
       const vm = new Vue({
            el:'#root',
            data:{
                nameOne : '张',
                nameLast: '三',
                fullName: '张-三',
            },
            // 监视属性
            watch:{
                nameOne(val){
                  // 新需求，一秒钟后再修改 
                  // 需要注意的是：此处的setTimeout 只能写出箭头函数，否则setTimeout回调函数的this指向不是 vm 或组件实例
                  console.log('姓发生了改变..');
                  setTimeout(() => {
                    this.fullName  = val + '-' + this.nameLast;
                  }, 1000);
                },
                nameLast(val){
                    console.log('名发生了改变..');
                   this.fullName =  this.nameOne + '-' + val ;
                }
                

            }
        })
       
       
    </script>
</body>
</html>